<template>
	<el-card class="box-card">
		<el-steps :active="0" align-center>
		  <el-step title="基础信息"></el-step>
		  <el-step title="活动图片"></el-step>
		  <el-step title="活动时间"></el-step>
		  <el-step title="活动简介"></el-step>
		  <el-step title="补充说明"></el-step>
		  <el-step title="免费体验"></el-step>
		</el-steps>
		<el-row class="box-row">
			<el-form :model="formData" ref="formData" :rules="rules">
				<el-form-item class="title" style="width:50%;margin: 20px auto;">
					<el-col :span="24">基础信息</el-col>
				</el-form-item>
				<el-form-item  prop="courseName">
					<el-input v-model="formData.courseName" placeholder="输入活动名称" style="width:50%"></el-input>
				</el-form-item>
				<el-form-item  prop="courseTypeId">
					<el-select v-model="formData.courseTypeId" placeholder="活动分类" style="width:50%">
						<el-option v-for="item in classifyList" value-key="id" :key="item.id" :label="item.value" :value="item"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item  prop="coursePoints">
					<el-input v-model="formData.coursePoints" placeholder="体验价,遛点整数" style="width:50%"></el-input>
				</el-form-item>
				<el-form-item  prop="marketPrice">
					<el-input v-model="formData.marketPrice" placeholder="市场价,人民币" style="width:50%"></el-input>
				</el-form-item>
				<el-form-item prop="shName">
					<el-input v-model="formData.minAge" placeholder="宝宝最小年龄" style="width:20%"></el-input>
					<el-input v-model="formData.maxAge" placeholder="宝宝最大年龄" style="width:20%"></el-input>
					<el-select v-model="formData.ageUnit" placeholder="请选择年龄类型" style="width:9.5%">
						<el-option label="月" value="月"></el-option>
						<el-option label="岁" value="岁"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<el-button type="primary" style="width:50%;margin-top: 10px;" @click="submitForm('formData')">下一步</el-button>
		</el-row>
	</el-card>
</template>

<script>
	import { metaList,courseSave ,courseUpdate,courseInfo} from "@/api/getData"
	export default {
		data() {
			
			return {
				classifyList:[],
				formData: {
					courseOwner: "",
					courseType:"",
					courseTypeId:"",
					courseTypeName:"",
					courseName:"",
					coursePoints:"",
					marketPrice:"",
					currentStep:"1",
					minAge:"",
					maxAge:"",
					ageUnit:"",
					id: ""
				},
				rules:{
			        courseName:[
			            { required: true, message: '请输入活动名称', trigger: 'blur' },
			            { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
			        ],
			        courseTypeId:[
			            { required: true, message: '请选择活动分类', trigger: 'change' },
			        ],
			        coursePoints:[
			            { required: true, message: '请输入体验价', trigger: 'blur' },
			        ],
			        marketPrice:[
			            { required: true, message: '请输入市场价', trigger: 'blur' },
			        ],
				},
			}
		},

		created() {
			this.formData.id = this.$route.query.id;
			if(this.formData.id != undefined && this.formData.id != ""){
				this.courseInfo(this.formData.id);
			}else{
				this.metaList();
			}
			this.formData.courseOwner = this.$route.query.businessId;//所属商户
		},
		methods: {
			async courseInfo(id) {
				const res = await courseInfo({
					id: id,
				});
				if(res.code == "0") {
					this.formData.courseType = res.obj.courseType;
					this.formData.courseTypeName  = res.obj.courseTypeName;
					this.formData.courseName  = res.obj.courseName;
					this.formData.coursePoints  = res.obj.coursePoints;
					this.formData.marketPrice  = res.obj.marketPrice;
					this.formData.minAge  = res.obj.minAge;
					this.formData.maxAge = res.obj.maxAge;
					this.formData.ageUnit = res.obj.ageUnit;
					this.metaList();
				} else {
					this.$notify.error({
						title: '错误',
						message: res.msg,
						offset: 100
					});
				}
			},
			async metaList() {
				let _this = this;
				const res = await metaList({
					type: "kctype",
					pageSize: "100",
					pageNum: "1",
				});
				if(res.code == "0") {
					this.classifyList = res.list.rows;
					this.classifyList.forEach(function(item){
						if(_this.formData.courseType == item.id){
							_this.formData.courseTypeId = item;
						}
					})
					
				} else {
					this.$notify.error({
						title: '错误',
						message: res.msg,
						offset: 100
					});
				}
			},
			async submitForm(formName) {
				this.$refs[formName].validate(async(valid) => {
					if(valid) {
						
						if(this.formData.minAge == "" || this.formData.maxAge == "" ){
							this.$notify.error({
								title: '错误',
								message: "请输入年龄",
								offset: 100
							});
						}else if(this.formData.minAge > this.formData.maxAge){
							this.$notify.error({
								title: '错误',
								message: "最小年龄不能大于最大年龄",
								offset: 100
							});
						}
						if(this.formData.ageUnit == ""){
							this.$notify.error({
								title: '错误',
								message: "请选择年龄类型",
								offset: 100
							});
						}
						this.formData.courseType = this.formData.courseTypeId.id;
						this.formData.courseTypeName = this.formData.courseTypeId.value;
						let res;
						let id = "";
						if(this.formData.id != "" && this.formData.id != null){
							res = await courseUpdate(this.formData);
							id = this.formData.id; 
						}else{
							res = await courseSave(this.formData);
						}
						if(res.code == "0") {
							this.$router.push({
								path: 'activityTwo',
								query: {
									id: id == "" ? res.id : id,
									businessId:this.$route.query.businessId//所属商户
								}
							})
						} else {
							this.$notify.error({
								title: '错误',
								message: res.msg,
								offset: 100
							});
						}
					}
				});
			},
		},
	}
</script>

<style>
	.box-card {
		margin: 0 10px;
	}
	.title {
		background-color: #20a0ff;
		line-height: 60px;
		font-size: 18px;
		color: #fff;
	}
	.box-row{
		margin: 20px auto;
		width:100%;
		text-align: center;
	}
</style>